<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />		
		<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
        <meta name="viewport" content="user-scalable=0,width=device-width,initial-scale=1.0" >
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
	    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>      
        <style type="text/css">
        	/*全部*/
        	*{
	        	margin: 0px;
	        	padding: 0px;
	        }
	        
	        body{
	        	font-size: 12px;
                color: #FFF;
                font-family: Arial, Helvetica, sans-serif;
	        }
	        
	        div{
	        	display: block;
	        }
	        
	        a{
	             text-decoration: none;	
	        }
	        
	        li{
	        	list-style: none;
	        	display: list-item;
                text-align: -webkit-match-parent;
	        }
	        
	        /*头部*/
        	.mt_header{
        		background-color: black;
        	}
        	
        	.searchcontent{
        		float: right;
        		height: 39px;
        		width: 215px;
        	}
        	
        	.search_box{
        		height: 30px;
                width: 80%;
        	}
        	
        	button.search{
        		width: 34px;
        		height: 31px;
        	}
        	.carousel-inner img {
                width: 100%;
                height: 100%;
            }
            /*精彩活动*/
           div.jingcai{           	   
           	    width: 375px;
           	    height:680px ;
           	    margin-top: 20px;          	 
           }
            div.jingcai_inner{
            	height: 468px;
                background: #f5f5f5;
            }

            div.jingcai_top{
            	height: 40px;
            	border-bottom: 2px solid gray;
            }
            
            .jingcai_top{
            	position: relative;
            }
            
            .fa{
            	position:absolute ;
                left: 0px;
                top: 12px;
                color: #C10C0C;
            }
          
            .discover{
            	float: left;
                font-size: 20px;
                font-weight: normal;
                line-height: 40px;
                text-decoration: none;
                color: #333;
                position: absolute;
                left: 40px;
                top: -2px;
            }
            
            span.more a{
            	color: #666666;
                text-decoration: none;
                font-size: 12px;
                font-family: Arial, Helvetica, sans-serif;
                position: absolute;
                left: 320px;
                top: 12px;
            }
            
            span.more .fa{
            	position: absolute;
                left: 350px;
                top: 12px;
                color: #C10D0C;
            }
            
            .jingcai_inner .activity_inner{
            	margin: 8px;
            	width: 355px;
            	height: 150px;
            	border: solid 1px groove;
            }
            
            div.inner .roll ul li img{
            	width: 95%;
            	height: 100%;
            	position: absolute;
            }
            
            div.inner .roll ul li span{
            	position: relative;
            	top: 118px;
            	left: 10px;
            }
            
            div.inner .roll ul li p.active_activity{
            	float: right;
            	position: relative;
            	top: 118px;
            	left: -128px;
            }
            
            div.inner .roll ul li p.master_activity{
            	float: right;
            	position: relative;
            	top: 118px;
            	left: -220px;
            }
            
            .fa-universal-access{
            	float: left;
            }
            
            div.inner .roll ul li span.after{
             	position: absolute;
             	bottom: 0px;
             	right: 0px;
             }
             
            div.inner .roll ul li span.after  p{
            	color: #FFF;
            	position: relative;
            	left: 259px;
                top: -6px;
            }
            
            i.fa.fa-universal-access::before{
            	position: absolute;
            	bottom: -6px;
            	left: 228px;
            }
            
             div.master{
           	    width: 375px;
           	    height:368px ;
           	    margin-top: 20px;          	 
           }
           
           div.contest{
           	    width: 375px;
           	    height:368px ;
           	    margin-top: 20px;          	 
           }
      .nav-footer {
				    width: 100%;
				    position: fixed;
				    bottom: 0;
				    left: 0;
				    display: flex;
				    align-items: center;
				    justify-content: space-around;
				    background: #fff;
				    border-top: solid 1px #e6e6e6;
				    padding: 1%;
				    height: 50px;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 10px;
				    color: #929292;
				}
				.nav-footer a span img {
				    height: 25px;
				    overflow: hidden;
				    font-size: 23px;
				    padding-top: 2px;
				}
				.mui-icon {
				    font-family: Muiicons;
				    font-size: 24px;
				    font-weight: 400;
				    font-style: normal;
				    line-height: 1;
				    display: inline-block;
				    text-decoration: none;
				    -webkit-font-smoothing: antialiased;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 11px;
				    color: #929292;
				}
            .navLink{
	            text-decoration: none;
	            color: #000000;
            }
        </style>
		<title>约健联盟页</title>
	</head>
	<style type="text/css">
		.roll>ul>li{ position:relative;height:148px; width:320px}
        .roll>ul>li img{ position:absolute; left:0; top:0;height:100%; width:100%}
        .roll>ul>li span.after{ position:absolute; left:0;bottom:0;
color:#FFF; width:378px;height:36px; line-height:36px; font-weight:bold}
	</style>
	<body>
		<!--头部-->
		<header class="mt_header">
			<div class="mt_header_box">
				<img src="img/logo.gif"/>
				<!--搜索按钮-->
				<form action="#" class="searchcontent">					
					<input type="search" placeholder="内容搜索" class="search_box"/>
					<button class="search">搜索</button>
				</form>				
			</div>
		</header>
		<!--轮播图-->
		<div id="demo" class="carousel slide" data-ride="carousel">
 
         <!-- 指示符 -->
         <ul class="carousel-indicators">
         <li data-target="#demo" data-slide-to="0" class="active"></li>
         <li data-target="#demo" data-slide-to="1"></li>
         <li data-target="#demo" data-slide-to="2"></li>
         </ul>
 
         <!-- 轮播图片 -->
         <div class="carousel-inner">
         <div class="carousel-item active">
         <img src="img/1.jpg">
         </div>
         <div class="carousel-item">
         <img src="img/2.jpg">
         </div>
         <div class="carousel-item">
         <img src="img/3.jpg">
         </div>
         </div>
 
         <!-- 左右切换按钮 -->
         <a class="carousel-control-prev" href="#demo" data-slide="prev">
         <span class="carousel-control-prev-icon"></span>
         </a>
         <a class="carousel-control-next" href="#demo" data-slide="next">
         <span class="carousel-control-next-icon"></span>
         </a>
         </div>
		
		<!--主体内容-->
		<article>
        <div class="jingcai">
         	<div  class="jingcai_inner">
         		<div class="jingcai_top">
         			<!--<i class="fa fa-circle"></i>-->
         			<img src="img/activity.png"/>
							<a href="#" class="discover">精彩活动</a>
							<span class="more">
								<a href="#" >更多</a>
								<i class="fa fa-arrow-right"></i>
							</span>
         		</div>
         		
         		<div class="activity_inner ">
         			<div class="inner">
         				<div class="roll">
         					<ul>
         						<li>			
   		                <a href="#"><img src="img/slider-2.jpg" class="active_img1">
                        <span>活动名称:<p class="active_activity active_text1">loding</p></a>
                        <span class="after"><i class="fa fa-universal-access" style="font-size:24px"></i><p id="tmp" class="tmp1"></p></span></span>  
                        
         						</li>            						
         					</ul>
         				</div>
         			</div>
         		</div>
         		
         		<div class="activity_inner ">
         			<div class="inner">
         				<div class="roll">
         					<ul>
         					  
         						<li>
         							<img src="" class="active_img2" id="active_img">
                                    <span>活动名称：<p class="active_activity active_text2" id="active_text">loding</p></span>
                         <span class="after"><i class="fa fa-universal-access" style="font-size:24px"></i><p id="tmp" class="tmp2"></p></span>                                    
         						</li>   
         						
         					</ul>
         				</div>
         			</div>
         		</div>
         		<div class="activity_inner ">
         			<div class="inner">
         				<div class="roll">
         					<ul>         					        							
         						<li>
         							<img src="" class="active_img3" id="active_img">
                                    <span>活动名称：<p class="active_activity active_text3" id="active_text">loding</p></span>
                         <span class="after"><i class="fa fa-universal-access" style="font-size:24px"></i><p id="tmp" class="tmp3"></p></span>                                    
         						</li>           						
         					</ul>
         				</div>
         			</div>
         		</div>
         		<div class="activity_inner ">
         			<div class="inner">
         				<div class="roll">
         					<ul>        						
         						<li>
         							<img src="" class="active_img4" id="active_img">
                                    <span>活动名称：<p class="active_activity active_text4" id="active_text">loding</p></span>
                         <span class="after"><i class="fa fa-universal-access" style="font-size:24px"></i><p id="tmp" class="tmp4"></p></span>                                    
         						</li>  
         					</ul>
         				</div>
         			</div>
         		</div>
         	</div>
         </div>		
         
         
         <div class="master">
         	<div  class="jingcai_inner">
         		<div class="jingcai_top">
         			<img src="img/13.Clipboard.png"/>
							<a href="#" class="discover">权威大师</a>
							<span class="more">
								<a href="#" >更多</a>
								<i class="fa fa-arrow-right"></i>
							</span>
         		</div>
         		
         		<div class="activity_inner ">
         			<div class="inner">
         				<div class="roll">
         					<ul>
         						<li>
         							<img src="img/13.Clipboard.png" class="master_img1" id="active_img">
                                    <span>大师姓名：<p class="master_activity master_text1" id="active_text">loding</p></span>
                         <span class="after"><i class="fa fa-universal-access" style="font-size:24px"></i><p id="tmp" class="master1"></p></span>                                    
         						</li>            						
         					</ul>
         				</div>
         			</div>
         		</div>
         		<div class="activity_inner ">
         			<div class="inner">
         				<div class="roll">
         					<ul>
         					  <li>
         							<img src="" class="master_img2" id="active_img">
                                    <span>大师姓名：<p class="master_activity master_text2" id="active_text">loding</p></span>
                         <span class="after"><i class="fa fa-universal-access" style="font-size:24px"></i><p id="tmp" class="master2"></p></span>                                    
         						</li>   
         						
         					</ul>
         				</div>
         			</div>
         		</div>        		
         	</div>
         </div>		
        
         <div class="contest">
         	<div  class="jingcai_inner">
         		<div class="jingcai_top">
         			<img src="img/sports.png"/>
							<a href="#" class="discover">最近比赛</a>
							<span class="more">
								<a href="#" >更多</a>
								<i class="fa fa-arrow-right"></i>
							</span>
         		</div>
         		
         		<div class="activity_inner ">
         			<div class="inner">
         				<div class="roll">
         					<ul>
         						<li>
         							<img src="" class="contest_img1" id="active_img">
                                    <span>比赛名称：<p class="active_activity contest_text1" id="active_text">loding</p></span>
                         <span class="after"><i class="fa fa-universal-access" style="font-size:24px"></i><p id="tmp" class="contest1"></p></span>                                    
         						</li>            						
         					</ul>
         				</div>
         			</div>
         		</div>
         		<div class="activity_inner ">
         			<div class="inner">
         				<div class="roll">
         					<ul>
         					  <li>
         							<img src="" class="contest_img2" id="active_img">
                                    <span>比赛名称：<p class="active_activity contest_text2" id="active_text">loding</p></span>
                         <span class="after"><i class="fa fa-universal-access" style="font-size:24px"></i><p id="tmp" class="contest2"></p></span>                                    
         						</li>   
         						
         					</ul>
         				</div>
         			</div>
         		</div> 
         		
         		
         	</div>
         </div>	
		</article>
</div>

<div class="nav-footer">
			<a class="" href="index.html">
				<span><img src="img/home.png"/></span>
				<span class="mui-tab-label">联盟</span>
			</a>
			<a href="trail.html">
				<span><img src="img/sport.png"/></span>
				<span class="mui-tab-label">训练</span>
			</a>
			<a href="showpicture.html">
				<span><img src="img/picture.png"/></span>
				<span class="mui-tab-label">晒图</span>
			</a>
			<a class="icon-active" href="club.html">
				<span><img src="img/clubs.png"/></span>
				<span class="mui-tab-label">俱乐部</span>
			</a>
			<a href="mine.html">
				<span><img src="img/mine.png"/></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</div>
		<script>
			 $(function() {
            var url = "http://172.24.10.175/workout/api.php/lists/mod/activity";
            $.ajax({
                type: 'post',
                url: url,
                cache: false,
                dataType: 'jsonp',
                success: function (data) {
                    for (var i =0;i<7;i++){
                        $(".active_img"+i).attr("src","http://172.24.10.175/workout/Uploads/"+data[i].thumb);
                        $(".active_text"+i).text(data[i].activity_name);
                        $(".tmp"+i).text(data[i].hits);
                    }
                }
            });
        });
        
        
        $(function() {
            var url1 = "http://172.24.10.175/workout/api.php/lists/mod/master";
            $.ajax({
                type: 'post',
                url: url1,
                cache: false,
                dataType: 'jsonp',
                success: function (data) {
                    for (var i =0;i<3;i++){
                        $(".master_img"+i).attr("src","http://172.24.10.175/workout/Uploads/"+data[i].thumb);
                        $(".master_text"+i).text(data[i].realname);
                        $(".master"+i).text(data[i].hits);
                    }
                }
            });
        });
        
         $(function() {
            var url2 = "http://172.24.10.175/workout/api.php/lists/mod/contest";
            $.ajax({
                type: 'post',
                url: url2,
                cache: false,
                dataType: 'jsonp',
                success: function (data) {
                    for (var i =0;i<3;i++){
                        $(".contest_img"+i).attr("src","http://172.24.10.175/workout/Uploads/"+data[i].thumb);
                        $(".contest_text"+i).text(data[i].name);
                        $(".contest"+i).text(data[i].hits);
                    }
                }
            });
        });
        
        
		</script>
	</body>
</html>
